<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <p id="tis">这是一个p标签</p>
    <div>这是一个div</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        //方法一：使用querySelector 获取当个元素
        // const 对象名 = document.querySelector('CSS选择器')
        const divv = document.querySelector('div')
        divv.style.textAlign = 'center'
        divv.style.color = 'blue'




        //方法二：使用querySelectorAll  获取多个元素  得到伪数组
        // const 对象名 = document.querySelectorAll('CSS选择器')
        const lis = document.querySelectorAll('ul li')
        // console.log(lis)  
        // lis.style.color = 'red'  //报错 为什么？
        // 因为querySelectorAll返回的不是单个DOM元素，需要使用for语句遍历每个元素才可以
        for(let i = 0 ;i<lis.length;i++){
            // lis[2].style.color = 'red'
            lis[i].addEventListener('click',function(){
                console.log(`点击了第${i+1}`)
            })
        }




        //其他方法

        // 1.getElementById 获取ID选择器
        const tis = document.getElementById('tis')
        tis.style.color = 'red'

        //2.getElementsByTagName
        const box = document.getElementsByTagName('div')
        box.style.backgroundColor = 'red'
    </script>
</body>
</html>